<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">点击</button>
    <script>
      //this 不要关注this的定义 需要关注this的调用
      //全局 this
      //   var obj = {
      //     name: '张三',
      //     age: 20,
      //     fn: function () {
      //       console.log(this)
      //     },
      //   }
      //   //第一种情况：通过对象.方法名-->this会指向该对象

      //   obj.fn()
      //   // 第二种情况:赋值给变量执行 ---》this会指向window对象
      //   var myfn = obj.fn
      //   window.myfn()
      //   myfn()
      //   //3、函数里的this
      //   //第一种 直接调用函数
      //   function fn1() {
      //     console.log(this) //定义函数this直接指向window
      //   }
      //   fn1()
      //   //通过事件执行函数 this会指向事件源
      //   function fn2() {
      //     console.log(this)
      //   }
      //   document.onclick = fn2   //指向document
      // document.querySelector('.btn')
      //   document.querySelector('.btn').onclick=fn2 //指向触发点击事件的且类为.btn的元素
      /* 
      总结：
      1、对象调用其函数  this指向该对象
      2、变量赋值函数调用会指向window对象
      3、全局作用域定义的共有函数指向window对象      如： function fn1(){console.log(this)}this==>window
      4、事件触发执行的函数的this==>触发该事件的事件源： document.element
      */
      function a() {
        console.log(this)
        // b();
        return function b() {
          console.log(this)
          // c();
          return function c() {
            console.log(this)
            var d = () => {
              var obj = {
                fn: c,
              }
              console.log(this)
              return obj
            }
            //    d()
            return d
          }
        }
      }
      //   a()//全部指向window
      let obj1 = a()()()()
      let obj2 = a()()()()
      obj2.name = 'obj2'
      console.log(obj1)
    //   obj1.fn()
    //   var s= obj1.fn
    //   s()
    </script>
  </body>
</html>
